<template>
  <div class="fixed inset-0 bg-gray-500 flex justify-center items-start bg-opacity-20 z-1000" @click="guanbi"
       v-if="showModal">
    <div class="mt-50px w-150 p-5 flex flex-col shadow bg-light-500" @click.stop.prevent>
      <div class="flex justify-center items-center">
        <n-input v-model:value="searchText" placeholder="请输入搜索关键字" size="large"></n-input>
        <span class="ml-2 juzhong1">
          <n-icon size="26">
            <CloseOutline class="dianji" @click="guanbi"></CloseOutline>
          </n-icon>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup name="searchmodel" lang="ts">
import {useRoute, useRouter} from "vue-router";
import {CloseOutline} from "@vicons/ionicons5"
import {ref} from "vue"

const router = useRouter()
const route = useRoute()

const showModal = ref(false)

const searchText = ref("")
const init = () => {
  showModal.value = true
  // 监听esc按下
  document.addEventListener('keyup', function (e) {
    //此处填写你的业务逻辑便可
    if (e.key === "Escape") {
      doClose()
    }
  })
}
const doClose = () => {
  showModal.value = false
  document.removeEventListener('keyup', function (e) {
    //此处填写你的业务逻辑便可
    if (e.key === "Escape") {
      doClose()
    }
  })
}
const reset = () => {
  console.log("重置数据")
}
// 点击背景关闭
const guanbi = () => {
  doClose()
}

defineExpose({init, doClose, reset})
</script>

<style scoped>

</style>